<template>
  <div :class="[menu_width == 'MAX' ? 'main_content_MAX' : 'main_content_MIN']">
    <router-view></router-view>
  </div>
</template>


<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs, watch } from "vue";
import { useStore } from "vuex";

export default {
  setup() {
    const state = reactive({
      menu_width: "", //菜单尺寸
    });
    const Store = useStore();
    onMounted: {
      state.menu_width = Store.state.common.menu_width;
    }
    watch(
      //检测菜单尺寸的变化
      () => Store.state.common.menu_width,
      (newValue, oldValue) => {
        state.menu_width = Store.state.common.menu_width;
      }
    );
    return { ...toRefs(state) };
  },
};
</script>
<style lang="less" scoped>
.main_content {
  position: fixed;
  top: 60px;
  background-color: #fff;
  width: 100%;
  height: 100%;
  z-index: 999;
  border-radius: 5px;
}
.main_content_MAX {
  .main_content();
  left: 250px;

}
.main_content_MIN {
    .main_content();
    left: 80px;

}
</style>